<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}" >
    <link rel="stylesheet" th:href="@{css/login.css}">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6 login-col">
            <ul class="nav nav-tabs">
                <li class="col-xs-6 active"><a href="#login" data-toggle="tab">登录账号</a></li>
                <li class="col-xs-6"><a href="#add" data-toggle="tab">注册账号</a></li>
            </ul>
            <div class="tab-content">
                <div id="login" class="tab-pane fade in active">
                    <form action="login" method="post">
                        <div class="form-group">
                            <label>账号:</label>
                            <input class="form-control" type="text" name="username" placeholder="账号/手机号" />
                        </div>
                        <div class="form-group">
                            <label>密码:</label>
                            <input class="form-control" type="password" name="password" placeholder="密码" />
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" name="reme"/>记住密码</label>
                        </div>
                        <div class="form-group">
                            <input type="submit" class="form-control btn btn-primary" value="登录" />
                        </div>
                        <div class="form-group">
                            <p><a href="#">找回密码</a></p>
                        </div>
                    </form>
                </div>
                <div id="add" class="tab-pane fade">
                    <form action="" method="post">
                        <div class="form-group">
                            <label>手机号:</label>
                            <input class="form-control" type="text" name="shoujihao" placeholder="填写你的手机号" />
                        </div>
                        <div class="form-group">
                            <label>用户名:</label>
                            <input class="form-control" type="text" name="username" placeholder="英文,中文,最长12英文字母或9个汉字" />
                        </div>
                        <div class="form-group">
                            <label>密码:</label>
                            <input class="form-control" type="password" name="password" placeholder="密码" />
                        </div>
                        <div class="form-group">
                            <label>手机验证码:</label>
                            <div class="row">
                                <div class="col-xs-6">
                                    <input class="form-control" type="text" name="yanma" placeholder="填写短信验证码"/>
                                </div>
                                <div class="col-xs-6">
                                    <input type="button" name="btn" class="form-control btn btn-default"
                                           value="点击获取验证码" />
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 30px;margin-bottom: 30px;">
                            <input type="submit" class="form-control btn btn-primary" value="注册" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
<script>


</script>
<script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}"></script>
</body>
</html>